/**
*@Author: 周贞荣
*@Date 2021/8/17 17:55
*@Description 用于显示label与value值，如：“姓名：周贞荣”
*@File LabelValue.vue 文件名称
*/
<template>
    <div class="lh24 flex break-all" :class="customClass" style="font-size: 16px;height: 35px;line-height: 35px">
        <span class="conLabel fontColor" :class="[label==='保单信息'?'labelClass':'']">{{label}}：</span>
        <span class="conInfo paddingR5 text-justify" style="color: #000000" v-html="content||''"></span>
        <Tooltip placement="right" v-if="tooltip">
            <Icon type="ios-help-circle-outline" style="color: #000"/>
            <div slot="content">
                <div v-for="(item, index) in tooltip" :key="index" class="tooltipContent">{{ item }}</div>
            </div>
        </Tooltip>
    </div>
</template>

<script>
    export default {
        name: "LabelValue",
        props: {
            label: {
                type: String,
                default: '--'
            },
            content: {
                type: String,
                default: ''
            },
            tooltip: {
                type: String,
                default: ''
            },
            customClass:{
                type: String,
                default: 'w25'
            }
        },
    }
</script>

<style scoped lang="scss">
    /*
*当前组件样式编写域
*/
    .conLabel {
        white-space: nowrap;
    }

    .tooltipContent {
        text-align: center;
        background-color: #FE8D13 !important;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 10px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .fontColor {
        color: #888888
    }

    .labelClass {
        color: #000000
    }
</style>
